<template>
  <div class="app">
    <h2>求和为: {{ sum }}</h2>
    <h2>名字为: {{ person.name }}</h2>
    <h2>年龄为: {{ person.age }}</h2>
    <button @click="changeSum">sum+1</button>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <hr />
    <h2>汽车为: {{ car }}</h2>
    <button @click="changeBrand">修改品牌</button>
    <button @click="changeColor">修改颜色</button>
    <button @click="changeEngine">修改发动机</button>
  </div>
</template>

<script setup lang="ts" name="App">
import { ref, shallowRef, reactive, shallowReactive } from 'vue'

// let sum = ref(0)
// let person = ref({
//   name: '张三',
//   age: 18,
// })
// 只能管第一层的响应式数据：可以提升响应式的性能 ！！！，避免监测过多的数据
let sum = shallowRef(0)
let person = shallowRef({
  name: '张三',
  age: 18,
})

function changeSum() {
  sum.value += 1
}
// 只能管第一层的响应式数据，所以此处不生效
function changeName() {
  person.value.name = '李四'
}
// 只能管第一层的响应式数据，所以此处不生效
function changeAge() {
  person.value.age = 60
}
function changePerson() {
  person.value = { name: 'tony', age: 100 }
}

// let car = reactive({
//   barnd: '奔驰',
//   options: {
//     color: '红色',
//     engine: 'V8',
//   },
// })
let car = shallowReactive({
  barnd: '奔驰',
  options: {
    color: '红色',
    engine: 'V8',
  },
})

function changeBrand() {
  car.barnd = '宝马'
}
function changeColor() {
  car.options.color = '紫色'
}
function changeEngine() {
  car.options.engine = 'V12'
}
</script>

<style scoped></style>
